<template>
  <uni-nav-bar title="加注订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>订单</view>
      <view style="width:70%;text-align: right;">{{fillListAll.order_sn}}（{{fillListAll.order_id}}）</view>
    </view>
    <view class="space-between top">
      <view>制单人</view>
      <view>{{fillListAll.driver_name}}（{{fillListAll.driver_id}}）</view>
    </view>
    <view class="space-between top">
      <view>订单类型</view>
      <view>{{fillListAll.order_type}}</view>
    </view>
    <view class="space-between top">
      <view>加注状态</view>
      <view>{{fillListAll.fill_status_text}}</view>
    </view>
    <view class="space-between top">
      <view>支付时间</view>
      <view>{{fillListAll.createtime}}</view>
    </view>
    <view class="space-between top">
      <view>加注机</view>
      <view>{{fillListAll.fill_name}}（{{fillListAll.fill_id}}）</view>
    </view>
    <view class="space-between top">
      <view>成交单价</view>
      <view>{{fillListAll.price}}元/公斤</view>
    </view>
    <view class="space-between top">
      <view>加注量</view>
      <view>{{fillListAll.order_amount}}</view>
    </view>
    <view class="space-between top">
      <view>实际加注量</view>
      <view>{{fillListAll.amount}}</view>
    </view>
    <view class="space-between top">
      <view>支付金额</view>
      <view>{{fillListAll.total_amount}}</view>
    </view>
    <view class="space-between top">
      <view>实付金额</view>
      <view>{{fillListAll.money}}
        <uni-icons type="bottom" size="20" @click="()=>show=!show"
          v-if="fillListAll.pay_list&&fillListAll.pay_list.length>0">
        </uni-icons>
      </view>
    </view>
    <view class="package" style="margin:0px 0px;padding:0px 20rpx;" v-if="show">
      <view class="space-between top" v-for="(item,index) in fillListAll.pay_list" :key="index">
        <view>{{item.name}}</view>
        <view>{{item.money}}</view>
      </view>
    </view>
    <view class="space-between top">
      <view>退款金额</view>
      <view>{{fillListAll.tui_fee}}</view>
    </view>
    <view class="space-between top">
      <view>车牌号</view>
      <view>{{fillListAll.cart_code?fillListAll.cart_code:'--'}}</view>
    </view>
    <view class="space-between top">
      <view>车友团</view>
      <view v-if="fillListAll.team_name">{{fillListAll.team_name}}（{{fillListAll.team_id}}）</view>
      <view v-else>--</view>
    </view>
    <view class="space-between top">
      <view>加注地址</view>
      <view style="width:70%;text-align: right;">{{fillListAll.address}}</view>
    </view>
  </view>
  <view class="center" style="justify-content: space-around;">
    <view class="abd" @click="stateType(1)">加注机状态</view>
    <view class="abd" @click="stateType(2)">退款</view>
  </view>
  <!-- 加注机状态 -->
  <FillState ref="state" :fillID="orderID" @submit="fillings()"></FillState>
  <!-- 退款 -->
  <Refund ref="refund" :fillID="orderID" @submit="fillings()"></Refund>
</template>

<script setup lang="ts">
  import { showLoading } from '@/utils/prompt';
  import { navBack } from '@/utils/navigator';
  import FillState from '@c/administrator/BulletBox/fillState.vue';
  import Refund from '@c/administrator/BulletBox/refund.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getOrderFillingInfo } from '@/gql/administrator';
  import { ref } from 'vue';
  /**
   * 加注订单
   * @property {Boolean} show 是否显示支付金额明细
   * @property {String} orderID 订单ID
   * @property {Object} fillListAll 订单详细信息
   */
  const refund = ref(null)
  const state = ref(null)
  const show = ref(false)
  const orderID = ref('')
  const fillListAll = ref({})
  onLoad((pearm) => {
    orderID.value = pearm.id
    fillings()
  })
  /**
   * 获取加注列表
   */
  function fillings() {
    showLoading('正在加载');
    const payload = {
      query: getOrderFillingInfo,
      variables: {
        order_id: Number(orderID.value)
      },
    };
    toPublish('ql/control/getOrderFillingInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      fillListAll.value = data.getOrderFillingInfo;
    });
  }
  function stateType(num : number) {
    switch (num) {
      case 1:
        state.value.openBankPad()
        break;
      case 2:
        refund.value.openBankPad()
        break;
    }
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }

  .abd {
    width: 341rpx;
    height: 78rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 78rpx;
    color: #fff;
    margin-top: 20rpx;
  }
</style>